<template>
  <div>
    <div class="navBar">
      <van-nav-bar
        title="我的资料"
        @click-left="$router.push('./personal')"
        left-arrow
      />
    </div>
    <div class="bg">
      <div class="imageBox">
        <van-cell-group inset>
          <van-cell
            title="头像"
            @click="$router.push('/editInfo?property=avatar')"
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <img v-imgerror="defaultImg" :src="data.avatar" alt="" />
              <van-icon name="arrow" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="bodyInfo">
        <van-cell-group inset>
          <van-cell
            title="昵称"
            :value="data.nickname"
            is-link
            :border="border"
            @click="$router.push('/editInfo?property=nickname')"
          />
          <van-cell
            title="性别"
            :value="sex"
            @click="showPopup"
            is-link
            :border="border"
          />

          <van-popup
            v-model="show1"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              ref="picker"
              title="性别"
              show-toolbar
              :columns="gender"
              :default-index="data.gender"
              @confirm="changeSex"
            />
          </van-popup>

          <van-cell
            title="地区"
            @click="showArea"
            :value="data.area"
            is-link
            :border="border"
          />
          <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-area
              title="选择地区"
              @confirm="save"
              :columns-num="2"
              :area-list="areaList"
            />
          </van-popup>

          <van-cell
            title="个人简介"
            :value="data.intro"
            is-link
            :border="border"
            @click="$router.push('/editInfo?property=intro')"
          />
        </van-cell-group>
      </div>
      <div class="button">
        <van-button type="default" size="large" @click="logOut"
          >退出登录</van-button
        >
      </div>
      <!-- <van-dialog v-model="showDialog" /> -->
    </div>
  </div>
</template>

<script>
import { userInfoAPI, eidtInfoAPI } from '@/api/personal'
import { areaList } from '@vant/area-data'
import { removeToken } from '@/utils/storage'
import { Dialog } from 'vant'
export default {
  name: 'InFo',
  data () {
    return {
      areaList,
      border: false,
      show1: false,
      show: false,
      data: '',
      defaultImg: 'https://img1.baidu.com/it/u=1682079686,16321901&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=413',
      gender: ['未知', '男孩子', '女孩子'],
      sex: ''
    }
  },
  async created () {
    await this.loadData()
    console.log(this.data)
  },
  methods: {
    async loadData () {
      const res = await userInfoAPI()
      this.data = res.data
      if (this.data.gender === 0) {
        this.sex = '未知'
      } else if (this.data.gender === 1) {
        this.sex = '男孩子'
      } else {
        this.sex = '女孩子'
      }
    },
    showPopup () {
      this.show1 = true
    },
    showArea () {
      this.show = true
    },
    PersonGender () {
      return this.data.gender === 2 ? '男' : '女'
    },
    async changeSex () {
      console.log('点击了性别的修改')
      // console.log(this.data.gender)
      // console.log()
      const index = this.$refs.picker.getIndexes()[0]
      const res = await eidtInfoAPI({ gender: index })
      console.log(res)
      this.$toast.success('修改性别成功')
      this.loadData()
      this.show1 = false
    },

    async save (arr) {
      try {
        console.log('点击了保存')
        // console.log(arr)
        const res = await eidtInfoAPI({ area: arr[1].name })
        console.log(res)
        this.$toast.success('城市修改成功')
        this.show = false
        this.loadData()
      } catch { }
    },
    logOut () {
      console.log('点击了按钮')
      Dialog.confirm({
        title: '提示',
        message: '确认退出?'
      })
        .then(() => {
          // on confirm
          removeToken()
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background-color: #f9f9f9;
  overflow: hidden;
  .button {
    padding: 0 15px;
    margin-top: 10px;
  }
  .imageBox {
    margin: 10px 0;
    ::v-deep .van-cell-group {
      display: flex;
      align-items: center;
      // background-color: red;
    }
  }
  img {
    width: 45px;
    height: 45px;
    // background-color: red;
    border-radius: 50%;
    margin-right: 8px;
  }
  ::v-deep .van-cell {
    display: flex;
    align-items: center;
  }
  ::v-deep .van-icon-arrow {
    color: #6f6077;
  }
  ::v-deep .van-cell {
    line-height: 35px;
  }
  ::v-deep .van-button__text {
    color: #e41e5a;
  }
  ::v-deep .van-button {
    border-radius: 10px;
  }
}
</style>
